一、项目搭建

注意事项:node>=6 and npm>=5.2


1、npx create-react-app hello-world
2、cd hello-world
3、npm start

二、components与props:

注意事项:1、props属性为只读属性。2、修改双向绑定值,需引入state


import React,{Component} from 'react';
import ReactDOM from 'react-dom';

1、方式一:

注意事项:修改Welcome实例内容,需要重复创建Welcome实例,如setInterval(function(){React.Component(<Welcome name={new Date()} />,RootDOM)},1000)


function Welcome(props){
    return (<div>展示数据:{props.name}</div>)
}

2、方式二:


class Welcome extends Component{
    constructor(props){
        super(props)
    }
    render(){
        return (
            <div>
                <span>展示数据{this.props.name}</span>
                <span>展示数据2</span>
            </div>
        )
    }
}

ReactDOM.render(<Welcome name="wqqq" />, document.getElementById('root'));

三、state与lifecycle:

解析:1、state在constructor中注入对象。2、state中的值通过this.setState()进行修改。方式一【object】:this.setState({propertyName:propertyValue});方式二【function(上次修改的state对象,props){}】。3、此处用React的lifecycle中有:componentDidMount、componentWillUnmount。

class Clock extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            date: new Date(),
            secondForm: 0
        }
    }

    tick() {
        this.firstFormSetState();
        this.secondFormSetState();
    }
    
    *新值不依赖旧值或props,计算出新值*
    firstFormSetState() {
        this.setState({
            date: new Date()
        })
    }

    *new value reply on old value or props*
    secondFormSetState() {
        this.setState((lastState, props) => {
            return ({secondForm: lastState.secondForm + 1})
        })
    }

    componentDidMount() {
        this.timerID = setInterval(() => this.tick(), 1000);
    }

    componentWillUnmount() {
        clearInterval(this.timerID)
    }

    render() {
        return (
            <div>
                <div>this is {this.state.date.toLocaleTimeString()}.</div>
                <div>second form of setState{this.state.secondForm}</div>
            </div>
        )
    }
}

ReactDOM.render(<Clock/>, document.getElementById('root'));

四、事件绑定

总结:1、改变this指向方法:bind()方法【this.handleClick=this.handleClick.bind(this);,或者<button onClick={this.handleClick.bind(this,'21')}>测试</button>}】、或者定义函数时使用arrow function【handleClick=()=>{}】。2、阻止默认行为,必须使用event.preventDefault()

class EventConstants1 extends React.Component{
    constructor(props){
        super(props);
        this.state={
            isToggleOn:true
        };
        // This binding is necessary to make `this` work in the callback
        // this.handleClick=this.handleClick.bind(this);
    }
    actionClick(e){
        e.preventDefault();
    }
    handleClick(...params){
        console.log(params);
        this.setState(()=>({
            isToggleOn:!this.state.isToggleOn
        }))
    }
    render(){
        return (
            <div>
                <a href="http://192.168.0.242:80" onClick={this.actionClick}>Click me to explain event.preventDefault()</a>
                <button onClick={this.handleClick.bind(this,'21')}>{this.state.isToggleOn?'YES':'NO'}</button>
            </div>
        )
    }
}


qzuser
31 声望4 粉丝

下一篇 »
微信扫码登录